<template>
    <div>
        <div class='list-item'>
            <div> {{ item.name }}</div>
            
            <div class="price-container">
                <div>{{ item.price | currencyRMB }}</div>
                <div class='less' @click='sub'>-</div>
                <div>{{ item.count }}</div>
                <div class='more' @click='add'>+</div>
                <slot></slot>
                 
            </div>
        </div>
    
    </div>
</template>

<script>
    export default {
        props:{
            item : {
                type : Object,
            },
            index: {
                type: Number
            }
        },
        methods:{
            add(){
                // ? 修改props
                // ? 修改状态，修改原组件状态
                // this.item.count ++;
                this.$emit('add',this.index);
            },
            sub(){
                this.$emit('sub',this.item)
            }
        }
    }
</script>

<style scoped>
    .list-item{
            display: flex;
            width: 200px;
            height: 30px;
            justify-content:space-between;
            align-items:center;
            margin: 0 auto;

        }
    .price-container{
            display: flex;
            width: 100px;
            height:100%;
            align-items:center;
            position: relative;
        }
    .less{
        cursor: pointer;
        /* margin:0 10px 0 10px */
    }
    .more{
        cursor: pointer;
        /* margin:0 10px 0 10px */

    }
</style>